<template>
  <view class="container" style="padding-top: 120upx">
    <view class="location">
      <view class="location-main">
        <view class="circle-str"></view>
        <view class="location-box">
          <view class="flex-verticality">
            <image class="location-icon" src="../../static/address/swarch-icon.png" mode=""></image>
            <input type="text" class="location-input" v-model="searchValue" placeholder="请输入机场名称/机场地址" placeholder-style="color:#CDCDCD" />
          </view>
          <image @click="clearSiteName" v-if="searchValue" class="del-img" src="../../static/address/del-img.png" mode=""></image>
        </view>
        <view class="location-cancel" @tap="goBack">
          <text>取消</text>
        </view>
      </view>
    </view>
    <view class="soso-icon" v-if="list.length === 0 && hotcites.length === 0">
      <image src="../../static/address/site-null.png" mode=""></image>
    </view>
    <scroll-view class="scroll-view" scroll-y scroll-with-animation="true" enable-back-to-top="true">
      <view class="block" v-if="hotcites.length !== 0">
        <!-- 历史记录 -->
        <view class="area list-item" id="hot">
          <view class="title-wrapp">
            <view class="title">
              <text class="l">历史记录</text>
            </view>
          </view>
          <view class="ul" v-if="open">
            <view class="li" hover-class="hover" v-for="(item, index) in hotcites" :key="index" @click="selectCity(item)">
              <view class="flex-verticality">
                <view class="li-name">
                  {{ item.name }}
                </view>
              </view>
              <view class="li-detail">
                {{ item.addrs }}
              </view>
            </view>
          </view>
          <view class="retract flex-center" @click="openHistory">
            <image class="retract-icon" :class="open ? '' : 'retract-transform'" src="../../static/address/retract-icon.png" mode=""></image>
          </view>
        </view>
      </view>
      <!-- 地址列表  -->
      <view class="city-list" v-if="list.length !== 0">
        <view class="list list-item">
          <view class="title">出发地址</view>
          <view class="item" hover-class="hover" v-for="(item, index) in list" @click="selectCity(item)" :key="index" v-if="!item.b">
            <view class="item-name">
              {{ item.name }}
            </view>
            <view class="item-detail">
              {{ item.englishName }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
var that;
export default {
  data() {
    return {
      hotcites: [], //热门城市，模拟数据请自行修改
      searchValue: "",
      list: [],
      listToString: "",
      open: true,
      addressType: 1, //地址类型 1出发地列表 2到达地列表
    };
  },
  watch: {
    searchValue(val) {
      if (!val) {
        this.list = JSON.parse(this.listToString);
        return;
      }
      that.$u.get("/vehicleService/cityAirPort", { name: this.searchValue }).then((res) => {
        console.log('res',res);
        this.list = res.result;
      });
      // this.searchValue = val
      // var list = this.list;
      // for (let key in list) {
      // 	var item = list[key];
      // 	if (item.addrs.toUpperCase().indexOf(val.toUpperCase()) != -1 || item.name.toUpperCase().indexOf(val
      // 			.toUpperCase()) !=
      // 		-1) {
      // 		item.b = false; //存在
      // 	} else {
      // 		item.b = true; //不存在
      // 	}
      // }
    },
  },
  onLoad(options) {
    console.log('查看接收到的类型',options);
    that = this;
    this.addressType = options.addressType;
    this.getAirportList();
    if (uni.getStorageSync("AIRPORT_HISTORY")) {
      this.hotcites = uni.getStorageSync("AIRPORT_HISTORY");
    }
  },
  methods: {
    selectCity(e) {
			console.log('查看uitem',e);
      uni.request({
        url: "https://restapi.amap.com/v3/geocode/geo",
        data: {
					city:e.cityName,
          address: e.name, // 需要查询的地名
          key: "5aa5d3a7b7a2375dbecf1e516dfc9f3a", // 高德地图 API 的密钥
        },
        success: (res) => {
          if (res.data.status === "1" && res.data.count > 0) {
            console.log('查看状态',this.addressType);
            if (this.addressType == 1) {
              res.data.geocodes[0].address = e.name
              console.log('res.data222',res.data);
              this.$store.commit("setDepartureAirport", res.data.geocodes[0]);//设置出发机场
            } else {
							console.log('接机出发',res);
              res.data.geocodes[0].address = e.name
              this.$store.commit("setArriveAirport", res.data.geocodes[0]); //设置到达机场
            }
            // const location = res.data.geocodes[0].location; // 经纬度信息
            // const latitude = location.split(",")[1]; // 纬度
            // const longitude = location.split(",")[0]; // 经度
            // console.log(latitude, longitude);
          }
        },
        fail: (res) => {
          console.log(res);
        },
      });
      // if (this.addressType == 1) {
      //   this.$store.commit("setDepartureAirport", e);//设置出发机场
      // } else {
      //   this.$store.commit("setArriveAirport", e); //设置到达机场
      // }
      // let history = uni.getStorageSync("AIRPORT_HISTORY");
      // if (history == "" || history.length == 0) {
      //   let arr = [e];
      //   uni.setStorageSync("AIRPORT_HISTORY", arr);
      // } else {
      //   let compare = e;
      //   let mark = 0;
      //   for (var i = 0; i < history.length; i++) {
      //     if (JSON.stringify(history[i].id) == JSON.stringify(compare.id)) {
      //       //比较相同
      //       mark = 1;
      //     }
      //   }
      //   if (mark == 0) {
      //     //如果数组和新的不相同
      //     if (history.length < 3) {
      //       let address = e;
      //       history.push(address);
      //       uni.setStorageSync("AIRPORT_HISTORY", history);
      //     } else {
      //       history.pop(); //移除最后一位
      //       let newArr = history; //在第一下标生成新数据
      //       history = [e];
      //       for (var i = 0; i < newArr.length; i++) {
      //         history.push(newArr[i]);
      //       }
      //       uni.setStorageSync("AIRPORT_HISTORY", history);
      //     }
      //   }
      // }
      uni.navigateBack({
        delta: 1,
      });
    },
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    clearSiteName() {
      this.searchValue = "";
    },
    openHistory() {
      this.open = !this.open;
    },
    getAirportList() {
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          console.log("当前位置的经度：" + res.longitude);
          console.log("当前位置的纬度：" + res.latitude);
          // /terminalManager/site
          that.$u.get("/vehicleService/cityAirPort", {
              type: 2,
              addressType: that.addressType, //地址类型 1出发地列表 2到达地列表
              latitude: res.latitude,
              longitude: res.longitude,
            })
            .then((data) => {
              console.log('dadad',data);
              that.list = data.result;
              that.listToString = JSON.stringify(data.result);
            });
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.location {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  background-color: #fff;
  font-size: 28upx;
}

.location-box {
  width: 600upx;
  height: 80upx;
  background: #f3f3f3;
  border-radius: 8upx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 30upx;
}

.del-img {
  height: 28upx;
  width: 28upx;
  margin-right: 30upx;
}

.location-icon {
  width: 40upx;
  height: 40upx;
  margin-left: 30upx;
}

.location-main {
  display: flex;
  align-items: center;
  position: relative;
  padding: 30upx 0 10upx 0;
}

.location-input {
  width: 350upx;
  padding-left: 20upx;
  color: #333333;
}

.location-cancel {
  width: 88upx;
  height: 80upx;
  position: absolute;
  right: 0;
  line-height: 80upx;
  color: #666666;
  display: flex;
  align-items: center;
  font-size: 30upx;
}

.location-cancel image {
  width: 36upx;
  height: 36upx;
}

.scroll-view {
  width: 100%;
  height: calc(100vh - 120upx);
  box-sizing: border-box;
}

.area {
  .title-wrapp {
    position: sticky;
    top: 0;
    left: 0;
  }

  .title {
    width: 100%;
    box-sizing: border-box;
    color: #222;
    font-size: 24rpx;
    font-weight: 500;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    line-height: 60upx;
    padding-left: 30rpx;
  }

  .ul {
    background: #ffffff;

    .li {
      padding: 30upx 0;
      margin: 0 30upx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

      .li-name {
        font-size: 30upx;
        font-weight: bold;
        color: #333333;
      }

      .li-meter {
        margin-left: 30upx;
      }

      .li-meter-num {
        font-size: 24upx;
        color: #178dff;
      }

      .li-meter-icon {
        height: 20upx;
        width: 20upx;
        margin-left: 10upx;
      }

      .li-detail {
        font-size: 24upx;
        color: #666666;
        margin-top: 10upx;
      }
    }
  }

  .retract {
    background-color: #ffffff;
    height: 80upx;

    .retract-icon {
      width: 43upx;
      height: 20upx;
    }

    .retract-transform {
      transform: rotate(180deg);
    }
  }
}

.city-list {
  background-color: #ffffff;

  .title {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #272636;
    padding-left: 30rpx;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #f8f8f8;
  }

  .item {
    padding: 30upx 0;
    margin: 0 30upx;
    color: #333;
    font-size: 32rpx;
    font-weight: 500;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

    .item-name {
      font-size: 30upx;
      font-weight: bold;
      color: #333333;
    }

    .item-detail {
      font-size: 24upx;
      color: #666666;
      margin-top: 10upx;
    }
  }

  .item:last-child {
    border: none;
  }

  .hover {
    background: #f4f5f9;

    &::after {
      background: #f4f5f9;
    }
  }
}

.soso-icon {
  height: 420upx;
  width: 420upx;
  position: relative;
  margin: 105upx auto 0 auto;

  image {
    width: 100%;
    height: 100%;
  }

  .soso-text {
    font-size: 30upx;
    color: #999999;
    width: 100%;
    position: absolute;
    text-align: center;
    bottom: 55upx;
  }
}
</style>
